<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <!-- 路由跳转按钮 -->
    <div id="title">
        <button data-path="/home">首页</button>
        <button data-path="/center">我的</button>
        <button data-path="/hot">热门</button>
    </div>
    <!-- 路由展示容器 -->
    <div id="view"></div>
  </div>
  <script>
    const oBtns = document.querySelectorAll("#title>button");
    const oView = document.getElementById("view");
    // 路由表
    const routes = [
        { path: "/home", component: "<h2>欢迎来到首页</h2>" },
        { path: "/center", component: "<h2>我真的不是大冤种</h2>" },
        { path: "/hot", component: "<h2>武汉尚硅谷XXX拿到30k offer</h2>" },
    ];
  
    //给所有的button绑定点击事件
    for (var i = 0; i < oBtns.length; i++) {
        oBtns[i].onclick = function () {
            // 更新location对象的hash值
            location.hash = this.dataset.path;
        };
    }
  
    // 绑定hash值改变的监听  => 根据最新的hash值, 找到对应路由组件更新到页面中
    window.onhashchange = function (e) {
        //拿到当前的hash   location.hash #/home => /home
        const hashPath = location.hash.slice(1)
        // 把当前的hash和routes中的path对比, 对比成功后修改视图
        routes.forEach((route) => {
            if (route.path === hashPath) {
                oView.innerHTML = route.component;
            }
        });
    };
  </script>
</body>
</html>